var timesheet = Ti.UI.createWindow({
	title: 'Timesheet',
    width:Titanium.UI.FILL,
    //backgroundColor:'#FFFFFF',
     backgroundImage:'/images/backgr.jpg',
     orientationModes: [
     		Ti.UI.PORTRAIT,
	        Ti.UI.LANDSCAPE_LEFT,
	        Ti.UI.LANDSCAPE_RIGHT
	    ],
	    barColor: '#378bb9',
	    layout: 'vertical'
});
timesheet.backButtonTitle = 'Back';

var mainView = Ti.UI.createScrollView({
	backgroundColor:'transparent',
	layout:'vertical'
});

var invisibleView = Ti.UI.createView({
	backgroundColor:'transparent',
	width:Ti.UI.FILL,
	height:20
});



var screenWidth = 322;
var needToChangeSize = false;

var screenWidthActual = Ti.Platform.displayCaps.platformWidth;

if (Ti.Platform.osname === 'android') {
	if (screenWidthActual != 641) {
		screenWidth = screenWidthActual;
		needToChangeSize = true;
	}
}


var SCREEN_WIDTH = 480;
var DAY_WIDTH = 68;
var DAY_COLOR = '#FFFFFF';
var DAY_FONTSIZE = 15;
var GROUP_HEIGHT = 90;
// Tool Bar
var toolBarDays = Ti.UI.createView({
	top : '2dp',
	left:0,
	height : '28dp',
	layout : 'horizontal',
	width:DAY_WIDTH*7
});

TextContent = function(textCt, widthCt, leftCt, heightCt){
	var label = Ti.UI.createLabel({
		top:-2,
		left : leftCt,
		height : heightCt,
		text : textCt,
		width : widthCt,
		textAlign : 'center',
		font : {
		fontSize : 10},
		color : '#FFFFFF'
	});
	return label;	
};

DayTitleButton = function(tit){
	var btn =  Ti.UI.createButton({
		left : '0dp',
		height : '35dp',
		borderColor:'#000000',
		borderWidth:'0.5',
		borderRadius:5,
		title: tit,
		width : DAY_WIDTH,
		backgroundGradient: {
		      type: 'linear',
		      colors: ['#b5bdc8','#000000'],//28343b
		      startPoint: {x:0,y:0},
		      endPoint:{x:0,y:35},
		      backFillStart:false},
		font : {
		fontSize : 14,
		fontWeight : 'bold'},
		color : '#FFFFFF'
	});	
	btn.addEventListener('click', function(e){
		alert(e.source.title);
	});
	return btn;
};

//x: 0: sun, 1: Mon, 2:Tue ....
//y:

ProjectGroup = function(prjCode, numHour, isBill, task, comment, x, y){
	
	var realLeft = x*DAY_WIDTH;
	var realTop = y*GROUP_HEIGHT;
	var view  = Ti.UI.createView({
		left:realLeft,
		top:realTop,
		layout:'vertical',
		width: DAY_WIDTH,
		height: GROUP_HEIGHT,
		borderRadius:5,
		borderWidth:'0.5',
		borderColor:'#000000',
		backgroundGradient: {
		      type: 'linear',
		      colors: ['#b5bdc8','#28343b'],
		      startPoint: {x:0,y:0},
		      endPoint:{x:0,y:100},
		      backFillStart:false}
	});
	
	
	var centerView = Ti.UI.createView({
		top:-2,
		width:Ti.UI.FILL,
		height:18,
		backgroundColor:'transparent'
	});
	
	centerView.add(TextContent(numHour, 10, 2, 20));
	
	if(isBill===true){
		var check = Ti.UI.createImageView({
			left:'50%',
			width:12,
			height:12,
			image:'/images/Check-icon.png'
		});
		centerView.add(check);
	}
	
	
	view.add(TextContent(prjCode, DAY_WIDTH, 0, 36));
	
	view.add(centerView);
	view.add(TextContent(task, DAY_WIDTH, 0, 18));
	view.add(TextContent(comment, DAY_WIDTH, 0, 18));
	return view;
};

toolBarDays.add(DayTitleButton('Sun'));
toolBarDays.add(DayTitleButton('Mon'));
toolBarDays.add(DayTitleButton('Tue'));
toolBarDays.add(DayTitleButton('Wed'));
toolBarDays.add(DayTitleButton('Thu'));
toolBarDays.add(DayTitleButton('Fri'));
toolBarDays.add(DayTitleButton('Sat'));

var viewContent = Ti.UI.createView({
	width:Ti.UI.FILL
});
//ProjectGroup = function(prjCode, numHour, isBill, task, comment, x, y)
viewContent.add(ProjectGroup('13CSY100117;ELECTRA', 5, true, 'login form design', 'long time to complete',  5, 0));
viewContent.add(ProjectGroup('A0012', 3, true, 'Webservice', 'easy task',  4, 0));
viewContent.add(ProjectGroup('B0011', 8, false, 'JSON', 'complex task',  1, 0));
viewContent.add(ProjectGroup('A0012', 7, true, 'timesheet impl', 'a little bit hard',  2, 0));

timesheet.open({
});

mainView.add(toolBarDays);
mainView.add(viewContent);
// add everything to the window
timesheet.add(invisibleView);
timesheet.add(mainView);
//timesheet.add(viewContent);





